<template>
  <Panel>
    <template #tit>商品列表</template>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="expand">
        <template v-slot="{ row }">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="商品ID">
              <span>{{ row.id }}</span>
            </el-form-item>
            <el-form-item label="所属分类">
              <span>{{ row.category }}</span>
            </el-form-item>
            <!-- <el-form-item label="商品图片">
              <span>{{ base_url + row.imgUrl }}</span>
            </el-form-item> -->
            <el-form-item label="商品描述">
              <span>{{ row.goodsDesc }}</span>
            </el-form-item>
            <el-form-item label="商品名称">
              <span>{{ row.name }}</span>
            </el-form-item>
            <el-form-item label="商品价格">
              <span>{{ row.price }}</span>
            </el-form-item>
            <el-form-item label="创建时间">
              <span>{{ row.ctime | format }}</span>
            </el-form-item>
            <el-form-item label="商品销量">
              <span>{{ row.sellCount }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="商品名称" prop="name"> </el-table-column>
      <el-table-column label="所属分类" prop="category"> </el-table-column>
      <el-table-column label="商品价格" prop="price"> </el-table-column>
      <el-table-column label="商品图片">
        <template v-slot="{ row }">
          <img :src="base_url + row.imgUrl" alt="" />
        </template>
      </el-table-column>
      <el-table-column label="商品描述" prop="goodsDesc"> </el-table-column>
      <el-table-column label="操作">
        <template v-slot="{ row }">
          <el-button type="primary" size="mini">操作</el-button>
          <el-button type="danger" size="mini" @click="fun(row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页处理 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20, 30]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </Panel>
</template>
<script>
//2.7导出获取商品列表方法
//2.8导出删除商品列表方法
import { listGoods, delGoods } from '../../api/goods'
export default {
  data() {
    return {
      // 当前第几页
      currentPage: 1,
      // 每页显示个数
      pageSize: 5,
      //总条数
      total: 0,
      tableData: [],
      base_url: 'http://127.0.0.1:5000/upload/imgs/goods_img/'
    }
  },
  created() {
    this.lstgood()
  },
  methods: {
    async lstgood() {
      const { data, total } = await listGoods({
        currentPage: this.currentPage,
        pageSize: this.pageSize
      })
      this.tableData = data
      this.total = total
    },
    handleSizeChange(val) {
      this.pageSize = val
      console.log(`每页 ${val} 条`)
      this.lstgood()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      console.log(`当前页: ${val}`)
      this.lstgood()
    },
    // 删除
    async fun(row) {
      const { code, msg } = await delGoods({
        id: row.id
      })
      if (code === 0) {
        this.$message.success(msg)
        this.lstgood()
      } else {
        this.$message.console.error(msg)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
img {
  width: 50px;
}
</style>
